
<template>
  <div>
    <el-input v-model="searchId" placeholder="输入 ID 搜索"></el-input>
    <el-table
      :data="filteredTableData"
      style="width: 100%; height: 100%"
      fit>
      <el-table-column
        fixed
        prop="id"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="class"
        label="班级">
      </el-table-column>
      <el-table-column
        prop="room"
        label="宿舍">
      </el-table-column>
      
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteStudent(scope.$index, scope.row)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="input-container">
      <el-input v-model.number="newStudent.id" placeholder="编号"></el-input>
      <el-input v-model="newStudent.name" placeholder="姓名"></el-input>
      <el-input v-model="newStudent.class" placeholder="班级"></el-input>
      <el-input v-model.number="newStudent.room" placeholder="宿舍"></el-input>
      <el-button type="primary" @click="addStudent">添加学生</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {"id": 1, "name": "张一", "class": "22 计科四班", "room": 1},
          {"id": 2, "name": "张二", "class": "22 计科四班", "room": 1},
          {"id": 3, "name": "张三", "class": "22 计科四班", "room": 1},
          {"id": 4, "name": "张四", "class": "22 计科四班", "room": 1},
          {"id": 5, "name": "王一", "class": "22 计科四班", "room": 2},
          {"id": 6, "name": "王二", "class": "22 计科四班", "room": 2},
          {"id": 7, "name": "王三", "class": "22 计科四班", "room": 2},
          {"id": 8, "name": "王四", "class": "22 计科四班", "room": 2},
          {"id": 9, "name": "刘一", "class": "22 计科四班", "room": 3},
          {"id": 10, "name": "刘二", "class": "22 计科四班", "room":3}
        ],
        newStudent: {
          id: null,
          name: "",
          class: "",
          room: null
        },
        searchId: '',
      };
    },
    computed: {
      filteredTableData() {
        if (!this.searchId) {
          return this.tableData;
        }
        return this.tableData.filter(item => item.id === parseInt(this.searchId));
      }
    },
    methods: {
      addStudent() {
        const Student = {
          id: this.newStudent.id,
          name: this.newStudent.name,
          class: this.newStudent.class,
          room: this.newStudent.room
        };
        this.tableData.push(Student);
        this.newStudent.id = null;
        this.newStudent.name = "";
        this.newStudent.class = "";
        this.newStudent.room = null;
      },
      deleteStudent(index, student) {
        const originalIndex = this.tableData.findIndex(item => item === student);
        if (originalIndex!== -1) {
          this.tableData.splice(originalIndex, 1);
        }
      }
    }
  }

</script>
<style>
.input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; 
    text-align: center;
  }
  
.input-container > * {
    margin-right: 10px;
  }
</style>
